<template>
	<view :class="[primarySize()]">
		<view class="container">
			<view class="p30">
				<view class="flex-box">
					<view class="flex-box search_nav">
						<!-- <districts-selector :current_district_id="currentDistrict.id">
							<image src="https://admin.mosizp.cn/static/public/icon_address.png" mode="widthFix" class="ico25"></image>
							<view class="address_nav fwb fs24 col2 m-ellipsis">{{currentDistrict?currentDistrict.name:'区域'}}</view>
							<image src="https://admin.mosizp.cn/static/public/arrow_down.png" mode="widthFix" class="ico17"></image>
						</districts-selector> -->
						<input type="text" placeholder="请输入职位或公司" class="inp_nav flex-grow-1" placeholder-class="colnor" confirm-type="search" v-model="query.q" @confirm="onSearch" />
						<image src="https://admin.mosizp.cn/static/public/icon_search.png" mode="aspectFill" class="ico28" @click="onSearch"></image>
					</view>
					<image @click="bindAddIntention" :src="iconPath('add.png')" mode="aspectFill" class="ico40 ml30"></image>
				</view>
				<view>
					<train-list :jobs="jobs"></train-list>
					<view class="nothing" v-if="jobsMore.nothing">
						<image src="https://admin.mosizp.cn/static/public/icon_nothing.png" mode="aspectFit"></image>
						<text>暂无职位</text>
					</view>
					<view class="g-btn3-wrap" v-else>
						<view class="g-btn3" @click="fetchJob()">{{jobsMore.text}}</view>
					</view>
					
				</view>
			</view>
		</view>
	</view>
</template>

<script>
	import trainList from '../../components/train-list/train-list.vue';
	const app = getApp();
	export default {
		components: {
			trainList
		},
		data() {
			return {
				
				currentDistrict:null,
				query: {
					q: ''
				},
				jobs: [],
				jobsMore: {page:1},
			}
		},
		onReady() {
			uni.setNavigationBarColor({
				frontColor: '#ffffff',
				backgroundColor: this.primaryColor()
			})
		},
		onLoad(options) {
			
			let param = JSON.parse(options.param);
			this.query = param;
			this.currentDistrict = this.$core.getCurrentDistrict();
			this.refreshJob();
			
			uni.$on(app.globalData.Events.CurrentDistrictChange, this.eventOnCurrentDistrictChange);
		},
		onUnload(){
			uni.$off(app.globalData.Events.CurrentDistrictChange, this.eventOnCurrentDistrictChange);
		},
		methods: {
			onSearch(){
				this.refreshJob();
			},
			refreshJob(){
				this.jobs = [];
				this.jobsMore = {page:1};
				this.fetchJob();
			},
			fetchJob() {
				let query = this.query;
				query.pagesize = 10;
			    this.$util.fetch(this, 'xilujob.train/jobs', query, 'jobsMore', 'jobs', 'data', 'unique');
			},
			eventOnCurrentDistrictChange(currentDistrict) {
				this.currentDistrict = currentDistrict;
				this.refreshJob();
			},
			bindAddIntention(){
				if(!this.$core.getUserinfo(true)){
					return;
				}
				uni.navigateTo({
					url: '/pages/user/add_train_interest'
				})
			}
		}
		
	}
</script>

<style lang="scss" scoped>
.search {
		&_nav {
			width: 618rpx;
			height: 86rpx;
			background: #FFFFFF;
			box-shadow: 0rpx 4rpx 20rpx 0rpx rgba(183, 189, 202, 0.3);
			border-radius: 43rpx;
			margin-left: auto;
			margin-right: auto;
			padding: 0 30rpx;

			.address_nav {
				max-width: 112rpx;
				padding-left: 20rpx;
				padding-right: 15rpx;
			}

			.inp_nav {
				position: relative;
				margin-left: 30rpx;
				padding: 0 30rpx;
				font-size: 28rpx;
				color: var(--normalBlack);
				position: relative;
			}

			.inp_nav:before {
				content: '';
				width: 1px;
				height: 34rpx;
				background: #ECECEC;
				position: absolute;
				top: 50%;
				left: 0;
				transform: translateY(-50%);
			}
		}

	}
.item{
		width: 690rpx;
		background: #FFFFFF;
		box-shadow: 0rpx 0rpx 20rpx 0rpx rgba(0,0,0,0.03);
		border-radius: 18rpx;
		padding: 30rpx;
		margin-top: 20rpx;
		.tips{
			font-size: 24rpx;
			color: #FF7B20;
			padding: 0 6rpx;
			height: 37rpx;
			line-height: 33rpx;
			border-radius: 6rpx;
			border: 2rpx solid #FF7B20;
		}
	}
	.btn{
		width: 166rpx;
		height: 62rpx;
		line-height: 62rpx;
		text-align: center;
		font-size: 28rpx;
		color: #FFFFFF;
		background: #C3C3C3;
		border-radius: 8rpx;
		&.ac{
			background: var(--primary);
		}
	}
</style>
